<template>
  <div class='search-input-wrapper'>
    <div class='search-input-box' :style='{width: width}'>
      <el-input
        size="medium"
        :placeholder="placeholder"
        prefix-icon="el-icon-search"
        @change="handleChange"
        v-model.trim="inputValue">
      </el-input>
    </div>
  </div>
  <!-- meeting_ic_search@2x.png -->
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
      inputValue: ''
    }
  },
  props: {
    defaultValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    width: {
      type: String,
      default: '400px'
    }
  },
  methods: {
    handleChange () {
      this.$emit('change', this.inputValue)
    }
  },
  created () {
    this.inputValue = this.defaultValue
  }
}
</script>

<style lang="stylus" scoped>
.search-input-wrapper
  display inline-block
  .search-input-box
    >>> .el-input
      max-width 100%
    >>> .el-input__inner
      padding-right 10px
      padding-left 46px
      border-radius 8px
      max-width 100%
      &::-webkit-input-placeholder
        font-size 12px
        color #888B9C
    >>> .el-input__prefix
      left 12px
    >>> .el-input__icon
      line-height 32px
</style>
